<template>
  <view class="rf-product-list">
    <!--左边商品列表-->
    <view class="rf-product-list-container">
      <block v-for="(item, index) in list" :key="index">
        <view
          v-if="(index + 1) % 2 !== 0 || isList"
          class="rf-product-item"
          @tap.stop="$u.route('/jkdPages/productDetail/productDetail', { id: item.goodsId, source: platform })"
          :class="[isList ? 'rf-product-flex-list' : '']"
          hover-class="hover"
          :hover-start-time="150"
        >
          <view class="rf-product-image-wrapper">
            <image :src="item.goodsThumbUrl" mode="widthFix" :preview="false" :class="[isList ? 'rf-product-list-img' : 'rf-product-img']"></image>
          </view>
          <view class="rf-pro-content">
            <view class="rf-pro-tit" v-if="item.goodsName.length > 10">
              {{ item.goodsName }}
            </view>
            <view class="rf-pro-tit2" v-else> {{ item.goodsName }} </view>
            <view v-if="item">
              <view class="rf-pro-price">
                <text class="rf-sale-price text-purple">￥{{ item.price }}</text>
                <text class="rf-factory-price" v-if="item.marketPrice > item.price">￥{{ item.marketPrice }}</text>
              </view>
              <view class="rf-pro-pay">
                <view class="cu-capsule">
                  <view class="cu-tag font18 bg-purple">预估积分</view>
                  <view class="cu-tag font18 line-purple"> {{ item.commission }} </view>
                </view>
                <view class="cu-tag radius" :class="'bg-' + labelColor">{{ platformName }}</view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <!--右边商品列表-->
    <view class="rf-product-list-container" v-if="!isList">
      <block v-for="(item, index) in list" :key="index">
        <view
          v-if="(index + 1) % 2 === 0"
          class="rf-product-item"
          @tap.stop="$u.route('/jkdPages/productDetail/productDetail', { id: item.goodsId, source: platform })"
          :class="[isList ? 'rf-product-flex-list' : '']"
          hover-class="hover"
          :hover-start-time="150"
        >
          <view class="rf-product-image-wrapper">
            <image :src="item.goodsThumbUrl" mode="widthFix" :preview="false" :class="[isList ? 'rf-product-list-img' : 'rf-product-img']"></image>
          </view>
          <view class="rf-pro-content">
            <view class="rf-pro-tit" v-if="item.goodsName.length > 10">
              {{ item.goodsName }}
            </view>
            <view class="rf-pro-tit2" v-else>
              {{ item.goodsName }}
            </view>
            <view v-if="item">
              <view class="rf-pro-price">
                <text class="rf-sale-price text-purple">￥{{ item.price }}</text>
                <text class="rf-factory-price" v-if="item.marketPrice > item.price">￥{{ item.marketPrice }}</text>
              </view>
              <view class="rf-pro-pay">
                <view class="cu-capsule">
                  <view class="cu-tag font18 bg-purple">预估积分</view>
                  <view class="cu-tag font18 line-purple"> {{ item.commission }} </view>
                </view>
                <view class="cu-tag radius" :class="'bg-' + labelColor">{{ platformName }}</view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
export default {
  name: 'rfProductList',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    platform: {
      type: String,
      default: 'jd'
    },
    // 是否以列表展示 | 列表或大图
    isList: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    platformName() {
      switch (this.platform) {
        case 'jd':
          return '京东'
        case 'douyin':
          return '抖音'
        case 'vip':
          return '唯品会'
        case 'pdd':
          return '拼多多'
        case 'kaola':
          return '考拉'
        case 'taobao':
          return '淘宝'
        default:
          return '未知'
      }
    },
    labelColor() {
      switch (this.platform) {
        case 'jd':
          return 'red'
        case 'douyin':
          return 'black'
        case 'vip':
          return 'pink'
        case 'pdd':
          return 'red'
        case 'kaola':
          return 'blue'
        case 'taobao':
          return 'orange'
        default:
          return 'purple'
      }
    }
  },
  data() {
    return {
      specClass: 'none'
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
// 导入colorUI
@import '/static/css/colorui/main.css';
@import '/static/css/colorui/icon.css';
@import '/static/css/colorui/animation.css';
// 通用商品列表
.rf-product-list {
  background-color: #f8f8f8;
  padding: 0 10upx;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
  .rf-product-list-container {
    flex: 1;
  }
  .rf-product-list-container:last-child {
    margin-right: 0;
  }
  .rf-product-item {
    width: 100%;
    margin-bottom: 10upx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12upx;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
  }
  .rf-product-list-item {
    width: 48vw;
  }
  .rf-product-flex-list {
    display: flex;
    margin-bottom: 10upx !important;
  }
  .rf-product-image-wrapper {
    border-radius: 6upx;
    overflow: hidden;
    position: relative;
    .rf-product-img {
      width: calc(50vw - 20upx);
      height: calc(50vw - 20upx) !important;
      border-radius: 12upx;
      display: block;
    }
    .rf-product-list-img {
      border-radius: 12upx;
      width: 400upx;
      height: 240upx !important;
      display: block;
      flex-shrink: 0;
    }
    .sketch {
      width: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      border-bottom-left-radius: 6upx;
      bottom: 0;
      padding: 0 8upx;
      right: 0;
      color: #fff;
      font-size: 24upx;
    }
    .triangle-wrapper {
      border-top-left-radius: 6upx;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      .triangle-tag {
        width: 64upx;
        height: 64upx;
      }
    }
  }
  .rf-pro-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20upx;
    .rf-pro-tit {
      height: 78upx;
      color: #2e2e2e;
      font-size: 28upx;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .rf-pro-tit2 {
      height: 39upx;
      color: #2e2e2e;
      font-size: 28upx;
    }
    .rf-pro-price {
      padding-top: 18upx;
    }
    .rf-sale-price {
      font-size: 46upx;
      font-weight: bold;
    }
    .rf-factory-price {
      font-size: 24upx;
      color: #a0a0a0;
      text-decoration: line-through;
      padding-left: 12upx;
    }
    .rf-pro-pay {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24upx;
    }
  }
}
</style>
